<!-- 福分领取记录 -->
<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <GzSearchForm :searchFunc="searchFunc" :resetFunc="onReset" searchConditionNum="6">
        <gz-text-up v-model:value="searchData['fansId']" :placeholder="'会员ID'" />
        <gz-text-up v-model:value="searchData['infoId']" :placeholder="'福分规则ID、活动ID'" />
        <a-form-item class="table-search-item">
          <a-select v-model:value="searchData['isUse']" :placeholder="'类型'">
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="'RULE'">规则</a-select-option>
            <a-select-option :value="'ACTIVITY'">活动</a-select-option>
          </a-select>
        </a-form-item>
        <gz-text-up v-model:value="searchData['scoreGet']" :placeholder="'领取的福分'" />
        <gz-text-up v-model:value="searchData['scoreConsume']" :placeholder="'消耗的福分'" />
        <a-form-item class="table-search-item">
          <a-select v-model:value="searchData['state']" :placeholder="'状态'">
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="0">未过期</a-select-option>
            <a-select-option :value="1">已消耗</a-select-option>
            <a-select-option :value="2">已过期</a-select-option>
          </a-select>
        </a-form-item>
        <gz-text-up v-model:value="searchData['scoreConsumeId']" :placeholder="'消耗福分ID'" />
      </GzSearchForm>

      <!-- 列表渲染 -->
      <GzTable
        ref="infoTableRef"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="searchData"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'infoType'">
            <span v-if="record.infoType === 'RULE'">规则</span>
            <span v-if="record.infoType === 'ACTIVITY'">活动</span>
          </template>
          <template v-if="column.key === 'state'">
            <a-badge v-if="record.state === 0" status="processing" text="未过期" />
            <a-badge v-if="record.state === 1" status="success" text="已消耗" />
            <a-badge v-if="record.state === 2" status="error" text="已过期" />
          </template>
          <template v-if="column.key === 'operation'">
            <!-- 操作列插槽 -->
            <GzTableColumns>
              <a-button type="link" danger>删除</a-button>
            </GzTableColumns>
          </template>
        </template>
      </GzTable>
    </a-card>
  </page-header-wrapper>
</template>
<script setup lang="ts">
import { ref, reactive, getCurrentInstance } from 'vue'
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

const infoTableRef = ref()
let tableColumns = reactive([
  { key: 'fansId', title: '会员ID',dataIndex: 'fansId',fixed: 'left', width: 200, minWidth: 150, maxWidth: 250 },
  { key: 'infoId', title: '福分规则ID/活动ID',dataIndex: 'infoId', width: 170, minWidth: 170, maxWidth: 200 },
  { key: 'infoType', title: '类型', dataIndex: 'infoType', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'scoreGet', title: '领取的福分', dataIndex: 'scoreGet', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'scoreConsume', title: '消耗的福分', dataIndex: 'scoreConsume', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'state', title: '状态', dataIndex: 'state', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'remark', title: '备注', dataIndex: 'remark', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'scoreConsumeId', title: '消耗福分ID', dataIndex: 'scoreConsumeId', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'operation', title: '操作', dataIndex: 'operation',width: 260, fixed: 'right', align: 'center' }
])

const searchData = ref({})

// 请求table接口数据
function reqTableDataFunc(params: any) {
  return new Promise(resolve=>{
    resolve({
      total: 3,
      records: [
        {
          fansId: 'F000000000001',
          infoId: 'I00000000001',
          infoType: 'RULE',
          scoreGet: 20000000000,
          scoreConsume: 1,
          state: 0,
          remark: '备注........',
          scoreConsumeId: 'S00000000001'
        },{
          fansId: 'F000000000002',
          infoId: 'I00000000002',
          infoType: 'ACTIVITY',
          scoreGet: 20000000000,
          scoreConsume: 10,
          state: 1,
          remark: '备注........',
          scoreConsumeId: 'S0000000000002'
        },{
          fansId: 'F000000000003',
          infoId: 'I00000000003',
          infoType: 'RULE',
          scoreGet: 20000000000,
          scoreConsume: 100,
          state: 2,
          remark: '备注........',
          scoreConsumeId: 'S00000000003'
        },
      ]
    })
  })
}

function searchFunc() {
  infoTableRef.value.refTable(true)
}

function onReset() {
  searchData.value = {}
}
</script>
